<script setup lang="ts">
import box from "@/assets/box.png";

import { Search } from "@element-plus/icons-vue"

import {
  tabsName,
  activeName,
  NavBarSearchInput
} from "./MockData";

</script>

<template>
  <div class="show-header">
    <!--  logo  -->
    <div style="display: flex;gap: 10px;">
      <el-image fit="fill" :src="box" style="width: 45px; height: 45px;"/>
      <div style="flex-direction: column; display: flex; text-align: left;">
        <el-text type="primary" style="font-weight: bold; font-size: 1.3rem; width: 100%; letter-spacing: 6px;">
          租房商城
        </el-text>
        <el-text type="primary" size="small" style="font-weight: bold; width: 100%">Rental Housing</el-text>
      </div>
    </div>

      <!--  tabs  -->
      <div class="show-tabs">
        <el-tabs v-model="activeName">
          <el-tab-pane v-for="name in tabsName" :label="name" :name="name"></el-tab-pane>
        </el-tabs>

        <!--  Search  -->
        <div class="NavBarSearch">
          <el-input
              v-model="NavBarSearchInput"
              placeholder="请输入搜索内容"
              class="NavBarSearchInput"
              size="large"
          />
          <el-button size="large" class="NavBarSearchButton">搜索</el-button>
        </div>
      </div>

  </div>
</template>

<style scoped>
.NavBarSearch {
  display: flex;
  width: 300px;
  border-radius: 30px;
  box-shadow: 0 0 0 1px #dcdfe6;
}
.NavBarSearchInput :deep(.el-input__wrapper) {
  border: none;
  border-radius: 30px 0 0 30px;
  box-shadow: none;
}

.NavBarSearchButton {
  border-radius: 0 30px 30px 0;
  border-left: none;
  padding: 0 20px;
  border: 0;
  border-left: solid 1px #DCDFE6;
}

.show-tabs {
  display: flex;
  align-items: center;
  gap: 30px;
}

.show-header {
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
  gap: 100px;
  justify-content: center;
}

:deep(.el-tabs__nav-wrap:after) {
  background-color: transparent;
}

:deep(.el-tabs.el-tabs--top) {
  padding-top: 15px;
}
</style>
